<template>
  <el-dialog title="修改分类" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="id" :label-width="120+''">
        <el-input v-model="form.id" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="name" :label-width="120+''">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false;submit()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { EDIT_CATEGORIES } from '@/store/categories/CONST'
import { editCategories } from '@/api/categories'
import { MessageType } from 'element-ui/types/message'

@Component
export default class CategoriesEdit extends Vue {
  public form = {
    id: 0,
    name: ''
  }

  public render1?:()=>void

  isOpen (id:number, name:string, render?:()=>void) {
    if (!this.dialogFormVisible) {
      this.form.id = id
      this.form.name = name
    } else {
      this.form.id = 0
      this.form.name = ''
    }
    this.render1 = render
    this.dialogFormVisible = !this.dialogFormVisible
  }

  async submit () {
    const { data, meta: { status, msg } } = await editCategories(this.form)
    let type:MessageType
    if (status >= 200 && status <= 300) {
      type = 'success'
    } else {
      type = 'error'
    }
    console.log(this.render1)
    type === 'success' && this.render1 && this.render1()

    this.$message({
      message: msg,
      type
    })
  }

  public dialogFormVisible = false
}
</script>

<style scoped>

</style>
